<template>
  <div class='lists'>
    <van-overlay
      :show="show"
      :z-index=100
    />
    <van-loading v-if="show" color="#1989fa" size="50px"/>
    <div class='header'>
      <img src="../../../static/index/left.png"
           alt=""
           @click='goBack'
      >
      <span>商铺列表</span>
      <span class="headerRightText" @click="GtoInitDate">刷新列表</span>
    </div>
    <listNav @Sparams="serverList"></listNav>
    <!-- 内容 -->
    <ul class='recom-content' v-if="GetServerlist.length > 0">
      <router-link tag="li"
                   :to="'/detail/'+ item.id"
                   v-for="(item,index) in GetServerlist"
                   :key="index"
                   v-show="GetServerlist.length > 0"
      >
        <p>
          <img v-if="item.img_path" :src="`${BaseUrl}${item.img_path}`"
               alt="" width="82" height="70">
          <img v-else :src="`${imgUrl}${collectListUrl}`" width="82" height="82" alt="">
        </p>

        <div class="">
          <p>{{item.title}}</p>
          <p>区域:{{item.areaname}}/{{item.catname}}</p>
          <!--<p>房源编号7074 信息已认证为真实房源</p>-->
          <div class="additionParams">
            <span v-if="item.info_level === 2" class="info_level">推荐</span>
            <span v-if="item.certify === 1" class="certify">认证</span>
            <span v-if="item.iftop === 2" class="iftop">置顶</span>
            <span v-if="item.ifindextop === 1" class="ifindextop">精顶</span>
          </div>
          <span class="font15">租金:
            <span class="red font15" v-if="item.rent>=1">{{item.rent}}</span>
            <span class="font15" v-else>面议</span>
          </span>

          <span class="red ml10" v-if="item.acreage>=1">{{item.acreage}}m²</span>
          <span class="font15 ml10" v-else>面议</span>
        </div>
        <p>
          <!--<button>认证</button>-->
          <!--<button>置顶</button>-->
        </p>
      </router-link>
    </ul>
    <div class="noData" v-else>暂无数据</div>
    <div class="noData">{{footerText}}</div>
  </div>
</template>

<script>
import { getStore } from "../../config/mUtils";
import pagehelper from "../../components/pagination/pagination";
import listNav from "./listNav";

export default {
  name: "lists",
  data() {
    return {
      page_number: 1, // 当前页码
      page_size: 10, // 每页显示条数
      total_count: 0, // 总条数
      footerText: "",
      more_data: true, //是否加载更多数据
      GetServerlist: [], // 列表数据
      BaseUrl: this.$parent.imgUrl,
      list: {},
      show: true,
      imgUrl: "http://menpuwang.com",
      collectListUrl: "/attachment/information/201908/1566036018dw19p.jpg"
    };
  },
  created() {
    // this.initData()
  },
  components: {
    listNav
  },
  mounted() {
    this.initData();
    this.listenScroll();
    this.getServerData();
  },
  methods: {
    serverList(data) {
      this.list = data;
      if (data) {
        this.initData();
      }
    },
    GtoInitDate() {
      this.$router.go(0);
    },
    //获取子组件传递的6个参数
    //catid-所属类型ID cityid-城市ID areaid-区域ID position-来源
    //acreage-面积筛选 rent-租金筛选
    initData() {
      let _this = this;
      this.page_number = 1;
      this.show = true;
      //默认获取路由query
      if (this.list.catid === "" || this.list.cityid === "") {
        this.list.catid = this.$route.query.catid;
        this.list.cityid = this.$route.query.cityid;
        this.list.rent = this.$route.query.rent;
      }
      this.$axios
        .post(
          "category/getList",
          this.qs.stringify({
            page: _this.page_number,
            cityid: _this.list.cityid,
            catid: this.list.catid,
            areaid: this.list.areaid,
            position: this.list.position,
            acreage: this.list.acreage,
            rent: this.list.rent,
            lb_store: this.list.lb_store,
            lb_qita: this.list.lb_qita,
            lb_qiu: this.list.lb_qiu,
            streetid: this.list.streetid
          })
        )
        .then(res => {
          if (res.data.data.count !== "") {
            _this.GetServerlist = res.data.data.info;
            this.total_count = res.data.data.count;
            this.show = false;
          } else {
            this.show = false;
            this.$toast.fail("暂无数据");
          }
          $("html,body")
            .finish()
            .animate(
              {
                scrollTop: "0px"
              },
              100
            );
        });
    },
    getServerData() {
      let vm = this;
      vm.footerText = "";
      if (vm.list.catid === "" || vm.list.cityid === "") {
        vm.list.catid = vm.$route.query.catid;
        vm.list.cityid = vm.$route.query.cityid;
        vm.list.rent = vm.$route.query.rent;
      }
      vm.$axios
        .post(
          "category/getList",
          vm.qs.stringify({
            page: vm.page_number,
            cityid: vm.list.cityid,
            catid: vm.list.catid,
            areaid: vm.list.areaid,
            position: vm.list.position,
            acreage: vm.list.acreage,
            rent: vm.list.rent,
            lb_store: vm.list.lb_store,
            streetid: vm.list.streetid
          })
        )
        .then(res => {
          if (res.data.status && res.data.data.info.length > 0) {
            res.data.data.info.forEach(function(item) {
              vm.GetServerlist.push(item);
            });
            vm.total_count = res.data.data.count;

            if (res.data.data.info.length < vm.page_size) {
              vm.footerText = "";
              vm.more_data = false;
            }
          } else {
            vm.footerText = "";
            vm.more_data = false;
          }
        });
    },
    listenScroll() {
      let self = this;
      $(window).scroll(function() {
        let scrollTop = $(window).scrollTop();
        let windowTop = $(window).height();
        let documentTop = $(document).height();
        if (documentTop - windowTop <= scrollTop) {
          if (self.more_data) {
            self.page_number++;
            self.loading = true;
            self.getServerData();
          }
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  beforeDestroy() {
    $(window).unbind("scroll");
  },
  watch: {
    //从首页跳转到
    $route(to, from) {
      if (from == "/home" && to.path == "/lists") {
        this.initData();
      }
    }
  }
};
</script>
<style scoped>
@import url("../../assets/css/lists.css");

.loading {
  text-align: center;
}

.loading img {
  margin: 0 auto;
}

.recom-content li img {
  height: 150px;
}

.headerRightText {
  float: right;
  font-size: 14px !important;
  position: absolute;
  right: 30px;
}

.red {
  color: red;
}

.font15 {
  font-size: 25px;
}

.ml10 {
  margin-left: 10px;
}
</style>
